<template>
  <vxe-grid v-bind="gridOptions" style="width:98%"></vxe-grid>
</template>

<script lang="ts">
import {reactive} from 'vue'
import { VxeGridProps } from "vxe-table"


export default {
  setup(): any {
    const gridOptions = reactive({
      border: true,
      resizable: true,
      keepSource: true,
      height: 700,
      printConfig: {},
      importConfig: {},
      exportConfig: {},
      pagerConfig: {
        perfect: true,
        pageSize: 15
      },
      editConfig: {
        trigger: "click",
        mode: "row",
        showStatus: true
      },
      toolbarConfig: {
        buttons: [
          {
            code: "insert_actived",
            name: "添加",
            status: "perfect",
            icon: "fa fa-plus"
          },
          {
            code: "mark_cancel",
            name: "删除",
            status: "perfect",
            icon: "fa fa-trash-o"
          },
          {
            code: "save",
            name: "保存",
            status: "perfect",
            icon: "fa fa-save"
          }
        ],
        perfect: true,
        refresh: {
          icon: "fa fa-refresh",
          iconLoading: "fa fa-spinner fa-spin"
        },
        import: {
          icon: "fa fa-upload"
        },
        export: {
          icon: "fa fa-download"
        },
        print: {
          icon: "fa fa-print"
        },
        zoom: {
          iconIn: "fa fa-arrows-alt",
          iconOut: "fa fa-expand"
        },
        custom: {
          icon: "fa fa-cog"
        }
      },
      proxyConfig: {
        props: {
          result: "result",
          total: "page.total"
        },
        ajax: {
          // 接收 Promise
          query: ({ page }) => {
            return new Promise(resolve => {
              setTimeout(() => {
                const list = [
                  {  id: 10001,  name: "张三",  sex: "男",  address: "上海市"},
                  {  id: 10002,  name: "李四",  sex: "女",  address: "北京市"},
                  {  id: 10003,  name: "王五",  sex: "男",  address: "天津市"},
                  {  id: 10004,  name: "张三",  sex: "男",  address: "上海市"},
                  {  id: 10005,  name: "李四",  sex: "女",  address: "北京市"},
                  {  id: 10006,  name: "王五",  sex: "男",  address: "天津市"},
                  {  id: 10007,  name: "张三",  sex: "男",  address: "上海市"},
                  {  id: 10008,  name: "李四",  sex: "女",  address: "北京市"},
                  {  id: 10009,  name: "王五",  sex: "男",  address: "天津市"},
                  {  id: 100010,  name: "张三",  sex: "男",  address: "上海市"},
                  {  id: 100011,  name: "李四",  sex: "女",  address: "北京市"},
                  {  id: 100012,  name: "王五",  sex: "男",  address: "天津市"}
                ];
                resolve({
                  page: {
                    total: list.length
                  },
                  result: list.slice(
                      (page.currentPage - 1) * page.pageSize,
                      page.currentPage * page.pageSize
                  )
                });
              }, 100);
            });
          },
          // body 对象： { removeRecords }
          delete: () => {
            return new Promise(resolve => {
              setTimeout(() => {
                resolve({});
              }, 100);
            });
          },
          // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
          save: () => {
            return new Promise(resolve => {
              setTimeout(() => {
                resolve({});
              }, 100);
            });
          }
        }
      },
      columns: [
        { type: "checkbox", width: 50 },
        { type: "seq", width: 60 },
        { field: "name", title: "姓名", editRender: { name: "input" } },
        { field: "sex", title: "昵称", editRender: { name: "input" } },
        {
          field: "address",
          title: "地址",
          showOverflow: true,
          editRender: { name: "input" }
        }
      ]
    } as VxeGridProps);

    return {
      gridOptions
    };
  }
}
</script>
